<template>
  <div>
    <div class="directory">
      <div class="title">
        <span>悬浮目录</span>
        <el-switch
            v-model="isShowTitle"
            active-color="#13ce66"
            inactive-color="#ff4949">
        </el-switch>
      </div>
      <div v-show="isShowTitle" class="body">
        <p v-for="(item, index) in directoryInfo" :key="index" :class="item.tagName"
           @click="todirectory">目录表题</p>
      </div>
    </div>
    <div class="operation">
      <div @click="addlike">
        <img alt="" v-if="Articlecontent.islike" src="./image/islike.svg">
        <img alt="" v-else src="./image/like.svg">
        <p>{{ Articlecontent.like }}</p>
      </div>
      <div @click="addcollect">
        <img alt="" v-if="Articlecontent.iscollect" src="./image/iscollect.svg">
        <img alt="" v-else src="./image/collect.svg">
        <p>{{ Articlecontent.collect }}</p>
      </div>
      <div @click="totop">
        <img src="./image/up.svg" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import {mapState, mapActions} from 'vuex'
import _throttle from 'lodash/throttle'
import $ from 'jquery'

export default {
  name: "FloatingDirectory",
  data() {
    return {
      isShowTitle: false,  // 目录是否显示
      directoryInfo: [],   //目录消息
    }
  },
  methods: {
    ...mapActions('Article', ['like', 'getArticlecontent', 'collect']),
    // 跳转到目录下的某个位置
    todirectory(pos, e) {

    },
    // 点赞
    addlike: _throttle(function () {
      let obj = {
        nid: this.Articlecontent.nid,
        usernid: this.$store.state.userinfo.nid
      }
      this.like(obj).then((value) => {
        if (value['code'] === 200) {
          this.$message({
            message: value['info'],
            type: 'success'
          });
          this.getArticlecontent(obj)
        } else {
          this.$message({
            message: value['info'],
            type: 'error'
          })
        }
      })
    }, 3000),
    // 收藏
    addcollect: _throttle(function () {
      let obj = {
        nid: this.Articlecontent.nid,
        usernid: this.$store.state.userinfo.nid
      }
      this.collect(obj).then((value) => {
        if (value['code'] === 200) {
          this.$message({
            message: value['info'],
            type: 'success'
          });
          this.getArticlecontent(obj)
        } else {
          this.$message({
            message: value['info'],
            type: 'error'
          })
        }
      })
    }, 3000),
    // 回到页面顶部
    totop() {
      document.getElementById(`img`).scrollIntoView()
    }
  },
  computed: {
    ...mapState('Article', ['Articlecontent'])
  },
}
</script>

<style scoped lang="less">
.directory {
  background-color: white;
  height: 100%;
  //height: 100vh;
  overflow-x: hidden;

  > .title {
    padding: 10px;
    text-align: center;
    border-bottom: 1px #f0eeee solid;
  }

  > .body {
    padding: 20px 10px;
    height: 300px;
    overflow: scroll;

    p {
      line-height: 30px;
      transition: all 0.3s;
      cursor: pointer;

      &:hover {
        background-color: #E5E5E5;
      }
    }

    .H1 {
      font-weight: bolder;
    }

    .H2 {
      padding-left: 10px;
      font-weight: bold;
    }

    .H3 {
      padding-left: 20px;
    }

    .H4 {
      font-style: italic;
    }
  }
}

.operation {
  margin-top: 30px;
  height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  div {
    background-color: white;
    border-radius: 50%;
    height: 60px;
    width: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    img {
      height: 30px;
      width: 30px;
    }

    p {
      font-size: 12px;
    }
  }
}
</style>